<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters" @submit.native.prevent>
        <el-form-item>
          <el-input
            clearable
            v-model="filters.model_name"
            prefix-icon="el-icon-search"
            placeholder="模块名称"
            @keyup.enter.native="getLyzdEnvironmentsList"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getLyzdModelsList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="model"
      highlight-current-row
      v-loading="listLoading"
      @selection-change="selsChange"
      style="width: 100%;"
    >
      <el-table-column type="selection" min-width="5%"> </el-table-column>
      <el-table-column
        type="index"
        align="center"
        :index="indexMethod"
        label="序号"
      />
      <el-table-column
        prop="model_name"
        label="模块名称"
        :show-overflow-tooltip="true"
        min-width="12%"
      >
      </el-table-column>
      <el-table-column
        prop="project"
        label="所属项目"
        :show-overflow-tooltip="true"
        min-width="12%"
      >
      </el-table-column>

      <el-table-column
        prop="content"
        label="描述"
        :show-overflow-tooltip="true"
        min-width="15%"
      >
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="5%">
        <template slot-scope="scope">
          <img
            v-show="scope.row.status === '0'"
            src="../../../../assets/icon-yes.svg"
          />
          <img
            v-show="scope.row.status === '1'"
            src="../../../../assets/icon-no.svg"
          />
        </template>
      </el-table-column>

      <el-table-column
        prop="create_time"
        :show-overflow-tooltip="true"
        label="创建时间"
        min-width="16%"
      >
      </el-table-column>
      <!--<el-table-column prop="last_update_time"   :show-overflow-tooltip="true" label="修改时间" min-width="16%" >
            </el-table-column>-->
      <el-table-column label="操作" min-width="19%">
        <template slot-scope="scope">
          <el-button
            plain
            type="warning"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >

          <el-button
            plain
            type="success"
            size="small"
            @click="handleDetail(scope.$index, scope.row)"
            >详情</el-button
          >

          <el-button
            type="info"
            size="small"
            @click="handleChangeStatus(scope.$index, scope.row)"
            >{{ scope.row.status === "1" ? "启用" : "禁用" }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="20"
        :page-count="total"
        style="float:right;"
      >
      </el-pagination>
    </el-col>

    <!--编辑界面-->
    <el-dialog
      title="模块编辑"
      :visible.sync="editFormVisible"
      :close-on-click-modal="false"
      style="width: 75%; left: 12.5%"
    >
      <el-form
        :model="editForm"
        label-width="80px"
        :rules="editFormRules"
        ref="editForm"
      >
        <el-form-item
          label="所属项目:"
          label-width="83px"
          prop="getProjectFirstID"
          　
        >
          <el-select
            v-model="editForm.project"
            placeholder="请选择所属项目"
            disabled
          >
            <el-option
              v-for="(item, index) in project"
              :key="index + ''"
              :label="item.project_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="模块名称" prop="model_name">
          <el-input
            v-model="editForm.model_name"
            auto-complete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="content">
          <el-input
            type="textarea"
            :rows="6"
            v-model="editForm.content"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="editSubmit"
          :loading="editLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>

    <!--详情界面-->
    <el-dialog
      title="模块详情"
      :visible.sync="detailFormVisible"
      :close-on-click-modal="false"
      style="width: 75%; left: 12.5%"
    >
      <el-form
        :model="editForm"
        label-width="80px"
        :rules="editFormRules"
        ref="editForm"
      >
        <el-form-item
          label="所属项目:"
          label-width="83px"
          prop="getProjectFirstID"
        >
          <el-select
            v-model="editForm.project"
            placeholder="请选择所属项目"
            disabled
          >
            <el-option
              v-for="(item, index) in project"
              :key="index + ''"
              :label="item.project_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模块名称" prop="model_name">
          <el-input
            v-model="editForm.model_name"
            auto-complete="off"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="content">
          <el-input
            type="textarea"
            :rows="6"
            v-model="editForm.content"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="detailFormVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--新增界面-->
    <el-dialog
      title="新增"
      :visible.sync="addFormVisible"
      :close-on-click-modal="false"
      style="width: 75%; left: 12.5%"
    >
      <el-form
        :model="addForm"
        label-width="80px"
        :rules="addFormRules"
        ref="addForm"
      >
        <el-form-item
          label="所属项目:"
          label-width="83px"
          prop="getProjectFirstID"
        >
          <el-select v-model="addForm.project" placeholder="请选择所属项目">
            <el-option
              v-for="(item, index) in project"
              :key="index + ''"
              :label="item.project_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="模块名称" prop="model_name">
          <el-input
            v-model.trim="addForm.model_name"
            auto-complete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="content">
          <el-input
            type="textarea"
            :rows="6"
            v-model="addForm.content"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="addSubmit"
          :loading="addLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {
  getLyzdModels,
  updateModel,
  addModel,
  editModelStatus, //disableEnvironment
  getProjectList,
} from "../../../../api/api";
export default {
  // components: {ElRow},
  data() {
    return {
      filters: {
        name: "",
      },
      project: [],
      total: 0,
      page: 1,
      listLoading: false,
      sels: [], //列表选中列

      editFormVisible: false, //编辑界面是否显示
      detailFormVisible: false, //编辑界面是否显示
      editLoading: false,
      //options: [{ label: "Web", value: "Web"}, { label: "App", value: "App"}],

      editFormRules: {
        model_name: [
          { required: true, message: "请输入模块名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],

        content: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { max: 255, message: "不能超过125个字符", trigger: "blur" },
        ],
      },
      //编辑界面数据
      editForm: {
        name: "",
        version: "",
        type: "",
        description: "",
        project_id: "",
      },

      addFormVisible: false, //新增界面是否显示
      addLoading: false,
      addFormRules: {
        model_name: [
          { required: true, message: "请输入模块名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],

        content: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { max: 255, message: "不能超过125个字符", trigger: "blur" },
        ],
      },
      //新增界面数据
      addForm: {
        name: "",
        version: "",
        type: "",
        description: "",
        getModelFirstID: "",
      },
    };
  },
  methods: {
    getLyzdModelsList() {
      this.listLoading = true;
      let self = this;
      let params = { page: self.page, model_name: self.filters.model_name };
      let headers = {
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getLyzdModels(headers, params).then((res) => {
        self.listLoading = false;
        let { msg, code, data } = res;
        if (code === "999999") {
          self.total = data.total;
          self.model = data.data;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },
    indexMethod(index) {
      let curpage = this.page; //单前页码，具体看组件取值

      let limitpage = 20; //每页条数，具体是组件取值

      return index + 1 + (curpage - 1) * limitpage;
    },
    getProjects() {
      let self = this;

      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getProjectList(headers).then((_data) => {
        let { msg, code, data } = _data;
        if (code === "999999") {
          var projectjsonArr = new Array();

          for (var i = 0; i < data.length; i++) {
            if (data[i].status == 0) {
              projectjsonArr.push(data[i]);
            }
          }

          self.project = projectjsonArr;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    //删除
    handleDel: function(index, row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        let self = this;
        let params = { ids: [row.id] };
        let header = {
          "Content-Type": "application/json",
          Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
        };
        delModel(header, params).then((_data) => {
          let { msg, code, data } = _data;
          if (code === "999999") {
            self.$message({
              message: "删除成功",
              center: true,
              type: "success",
            });
          } else {
            self.$message.error({
              message: msg,
              center: true,
            });
          }
          self.getLyzdModelsList();
        });
      });
    },
    // 改变项目状态
    handleChangeStatus: function(index, row) {
      let self = this;
      this.listLoading = true;
      let params = { model_id: row.id };

      let headers = {
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };

      editModelStatus(headers, params).then((res) => {
        self.listLoading = false;
        let { msg, code, data } = res;
        if (code === "999999") {
          self.$message({
            message: msg,
            center: true,
            type: "success",
          });

          this.getLyzdModelsList();
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getLyzdModelsList();
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
    },
    handleDetail: function(index, row) {
      this.detailFormVisible = true;
      this.editForm = Object.assign({}, row);
    },
    //显示新增界面
    handleAdd: function() {
      this.addFormVisible = true;
    },
    //编辑
    editSubmit: function() {
      let self = this;
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            self.editLoading = true;
            //NProgress.start();
            let params = {
              id: self.editForm.id,
              model_name: self.editForm.model_name,
              content: self.editForm.content,
            };
            //alert(params)
            let header = {
              "Content-Type": "application/json",
              Authorization:
                "Token " + JSON.parse(sessionStorage.getItem("token")),
            };
            updateModel(header, params).then((_data) => {
              let { msg, code, data } = _data;
              self.editLoading = false;
              if (code === "999999") {
                self.$message({
                  message: "修改成功",
                  center: true,
                  type: "success",
                });
                self.$refs["editForm"].resetFields();
                self.editFormVisible = false;
                self.getLyzdModelsList();
              } else if (code === "999997") {
                self.$message.error({
                  message: msg,
                  center: true,
                });
              } else {
                self.$message.error({
                  message: msg,
                  center: true,
                });
              }
            });
          });
        }
      });
    },
    //新增
    addSubmit: function() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let self = this;
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            self.addLoading = true;

            let params = JSON.stringify({
              project_id: self.addForm.project,
              model_name: self.addForm.model_name,
              content: self.addForm.content,
            });

            let header = {
              "Content-Type": "application/json",
              Authorization:
                "Token " + JSON.parse(sessionStorage.getItem("token")),
            };
            addModel(header, params).then((_data) => {
              let { msg, code, data } = _data;
              self.addLoading = false;
              if (code === "999999") {
                this.addForm.project = "";
                self.$message({
                  message: "添加成功",
                  center: true,
                  type: "success",
                });
                self.$refs["addForm"].resetFields();
                self.addFormVisible = false;
                self.getLyzdModelsList();
              } else if (code === "999997") {
                self.$message.error({
                  message: msg,
                  center: true,
                });
              } else {
                self.$message.error({
                  message: msg,
                  center: true,
                });
                self.$refs["addForm"].resetFields();
                self.addFormVisible = false;
                self.getLyzdModelsList();
              }
            });
          });
        }
      });
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
  },
  mounted() {
    this.getLyzdModelsList();
    this.getProjects();
  },
};
</script>

<style></style>
